<template>
  <a-card :bordered="false" :class="{'abcdefg':true}">

    <div class="no-print" style="text-align: right">
      <a-button v-print="'#printContent'" ghost type="primary"  @click='print()' id="print">打印</a-button>
    </div>
    <section  class="abcdefg" ref="print">
<!--      <div style="text-align: center" ref="print" id="printContent">-->
<!--        <svg id="barcode" style="text-align: center" ref="print"></svg>-->
<!--        <canvas id="canvas"></canvas>-->
<!--        <img id="barcode"/>-->
<!--      </div>-->
      <div id="qrcode" ></div> <!-- 创建一个div，并设置id为qrcode -->
    </section>
  </a-card>
  <!--</page-layout>-->
</template>
<script>
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import JsBarcode from 'jsbarcode'
  import QRCode from 'qrcodejs2'  // 引入qrcode

  export default {
    inject:['closeCurrent'],
    components: {
      ATextarea,
      ARow,
      ACol,
    },
    name: 'Printgzsld',
    props:{
      reBizCode:{
        type: String,
        default: ''
      }
    },
    data(){
      return {
        urlTest: 'http://localhost:8080/jeecg-boot/jmreport/view/598107853664210944',
        columns: [{
        }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        printer:'张三',
        printTime:'2019-02-01 12:00:00',
        printContent:'打印内容就是,做一个打印测试',
        printReason:'做一个打印测试',
        previewVisible: false,
        previewImage: '',
        fileList: [{
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
          {
            uid:'-2',
            name:'pic1.png',
            status:'done',
            url:'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
          }
        ],
        url:{
          loadApplicant:"/sps/register/loadApplicants",
          loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
        }
      }
    },
    // directives: {
    //   print:{
    //     inserted(el,binging){
    //       //alert('Hanson');
    //       el.click()
    //       //$(el).trigger('click')
    //     }
    //   }
    // },
    created() {
      //this.getDate();

    },
    mounted() {
      // this.init();
      this.qrcode();
      this.$print(this.$refs.print) // 使用
     // this.closeCurrent();


    },
    methods: {
      qrcode() {
        let qrcode = new QRCode('qrcode', {
          width: 132,
          height: 132,
          text: 'https://www.baidu.com', // 二维码地址
          colorDark : "#000",
          colorLight : "#fff",
        })
      },

      init(){
        //参考网址：https://www.cnblogs.com/guojikun/p/13637608.html
        //https://www.jb51.net/article/111552.htm
        //https://blog.csdn.net/qq_42557045/article/details/109179469?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-10.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-10.no_search_link

        // JsBarcode("#barcode", "1233453453444", {
        //   format: "CODE128",  //条形码的格式
        //   lineColor: "#000000",  //线条颜色
        //   width:2, //线宽
        //   height:40,  //条码高度
        //  // displayValue: false //是否显示文字信息
        // })
        //
        // JsBarcode("#barcode", "sc000001", {
        //   format: "CODE128",//选择要使用的条形码类型
        //   width:2,//设置条之间的宽度
        //   height:40,//高度
        //  displayValue:true,//是否在条形码下方显示文字
        //   //text:"456",//覆盖显示的文本
        //   fontOptions:"bold italic",//使文字加粗体或变斜体
        //   font:"fantasy",//设置文本的字体
        //   textAlign:"center",//设置文本的水平对齐方式
        //   textPosition:"top",//设置文本的垂直位置
        //   textMargin:5,//设置条形码和文本之间的间距
        //   fontSize:10,//设置文本的大小
        //   background:"#eee",//设置条形码的背景
        //   lineColor:"#000000",//设置条和文本的颜色。
        //   margin:15//设置条形码周围的空白边距
        // });
        //测试3
        JsBarcode("#barcode", "sc000010", {
          format: "CODE128",//选择要使用的条形码类型
          width:1,//设置条之间的宽度
          height:40,//高度
          displayValue:false,//是否在条形码下方显示文字
          text:"sc000010",//覆盖显示的文本
          fontOptions:"bold italic",//使文字加粗体或变斜体
          font:"fantasy",//设置文本的字体
          textAlign:"center",//设置文本的水平对齐方式
          textPosition:"top",//设置文本的垂直位置
          textMargin:5,//设置条形码和文本之间的间距
          fontSize:15,//设置文本的大小
          // background:"#eee",//设置条形码的背景
          lineColor:"#000000",//设置条和文本的颜色。
          margin:15//设置条形码周围的空白边距
        });
      },
      getDate(){
        // 当前时间
      },
      handleCancel () {
        this.previewVisible = false
      },
      handlePreview (file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      handleChange ({ fileList }) {
        this.fileList = fileList
      }
    }
  }
</script>
<style scoped>
  /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
  * {
    color: #000000!important;
    -webkit-tap-highlight-color: #000000!important;
  }
  /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

  .abcdefg .ant-card-body{
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 1%;
    border:0px solid black;
    min-width: 800px;
    color:#000000!important;
  }
  .explain{
    text-align: left;
    margin-left: 50px;
    color:#000000!important;
  }
  .explain .ant-input,.sign .ant-input{
    font-weight:bolder;
    text-align:center;
    border-left-width:0px!important;
    border-top-width:0px!important;
    border-right-width:0px!important;
  }
  .explain div{
    margin-bottom: 10px;
  }
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>